/*
 * @Author: 过峰 2452342725@qq.com
 * @Date: 2022-07-03 09:57:06
 * @LastEditors: 过峰 2452342725@qq.com
 * @LastEditTime: 2022-11-01 13:49:48
 * @FilePath: \desert-star\src\components\Title\littleTitle.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/**
 * @description 带蓝色竖线的小标题
 * @author gf
 */
import React from "react";
import styled from "styled-components";

interface titleProps {
  title: string; // 标题名
  secTitle?: string; // 标题右侧如果还有小标题，从这里传入
  mt?: string; // 标题的marin
  ml?: string; // 标题的marin
  mb?: string; // 标题的marin
  mr?: string; // 标题的marin
  weight?: number; // font-weight
  subWeight?: number; // font-weight
  family?: string; // font-family
  className?: any;
  id?: any;
}

const LittleLine = styled.div`
  width: 4px;
  height: 12px;
  line-height: 12px;
  background: #3f52b5;
  margin-right:${(props) => props.mr || "7px"};
`;
const LittleName = styled.div`
  color: #35425e;
  font-weight: ${(props) => props.weight || 600};
  font-size: 13px;
  line-height: 12px;
  font-family: ${(props) => props.family};
`;
const LittleBox = styled.div`
  display: flex;
  align-items: center;
  height: 28px;
  margin-top: ${(props) => props.mt || "12px"};
  margin-left: ${(props) => props.ml || "unset"};
  margin-bottom:${(props) => props.mb || "unset"};
`;

const LittleSecTitle = styled(LittleName)`
  font-weight: ${(props) => props.weight || 600};
`;
const LittleTitle = (props: titleProps) => {
  const { secTitle, mt, weight, subWeight, family, ml, className, id, mb, mr } = props;

  return (
    <LittleBox className={className} id={id} mt={mt} ml={ml} mb={mb}>
      <LittleLine mr={mr} />
      <LittleName weight={weight} family={family}>
        {props.title}
      </LittleName>
      {secTitle && (
        <LittleSecTitle weight={subWeight} family={family}>
          {secTitle}
        </LittleSecTitle>
      )}
    </LittleBox>
  );
};

export default LittleTitle;
